.iconfont() {
	font-size: 48px;
	color: #3b3b3b;
	padding: 10px;
}

.todo {
	width: 100%;
	height: 100vh;
	padding: 0 10px;
	background-color: skyblue;
	display: flex;
	flex-direction: column;

	&-header {
		flex: none;
	}

	&-content {
		flex: 1;
		overflow: auto;
		// padding-bottom: 400px;
	}

	&-title {
		font-size: 68px;
		padding: 10px 0;
		transition: opacity 0.4s cubic-bezier(0.6, 1, 0.55, 0.95);
		overflow: hidden;

		input {
			text-indent: 10px;
			.input();
			&:focus {
				background-color: rgba(120, 120, 120, 0.3);
			}
		}

		&.hide {
			opacity: 0;
		}
	}

	&-list {
		&-item {
			background-color: #fff;
			margin: 6px 0;
			min-height: 80px;
			border-radius: 12px;
			font-size: 28px;
			overflow: hidden;
			&-content {
				display: flex;
				align-items: center;
				padding: 16px 10px;
			}
			&-delete {
				color: #fff;
				background-color: #ff4c4c;
				width: 140px;
				height: 100%;
				display: flex;
				align-items: center;
				justify-content: center;
			}
			&:active {
				background-color: #f3f3f3;
			}
			.iconfont {
				.iconfont();
			}
			&-txt {
				padding-left: 12px;
				&.done {
					text-decoration: line-through;
					color: #a5a5a5;
				}
			}

			&-matter {
				margin-left: auto;
			}
		}
	}

	&-footer {
		flex: 0;
		width: 100%;
		padding: 10px;
		margin-top: auto;

		&.default {
			background-color: skyblue;
			.todo-footer-add {
				background-color: rgba(0, 0, 0, 0.1);
				.iconfont {
					color: #fff;
				}
				input {
					&::-webkit-input-placeholder {
						color: #fff;
					}
				}
			}
		}

		&.focus {
			background-color: #fff;
			box-shadow: 0 4px 20px 0px rgb(219, 219, 219);
			.todo-footer-add {
				background-color: #fff;
			}
		}
		&-add {
			display: flex;
			align-items: center;
			height: 100px;
			border-radius: 5px;
			font-size: 28px;
			overflow: hidden;
			padding: 16px 10px;

			.iconfont {
				.iconfont();
			}
			input {
				.input();
				text-indent: 6px;
				&::-webkit-input-placeholder {
					color: #3b3b3b;
				}
			}
		}
	}
}

.done-list {
	padding-top: 10px;
	&-title {
		position: sticky;
		top: 0;
		z-index: 1;
		padding: 10px 0;
		background-color: skyblue;

		&-box {
			font-size: 28px;
			width: 160px;
			height: 52px;
			padding-right: 10px;
			border-radius: 8px;
			color: #fff;
			background-color: rgba(0, 0, 0, 0.2);
			display: flex;
			align-items: center;
			justify-content: center;

			.iconfont {
				display: inline-block;
				font-size: 42px;
				transform: rotate(0deg);
				transform-origin: center;
				transition: transform 0.4s;
				&.hide {
					transform: rotate(-90deg);
				}
			}
		}
	}
	&-content {
		max-height: 100000px;
		transition: max-height 0.4s cubic-bezier(1, 1, 0, 1);
		overflow: hidden;
		&.hide {
			max-height: 0;
		}
	}
}
